{% load comments_tags %}
{% load myfilters_and_tags %}
{% load User_tags %}
{% load blog_extras %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 标题栏logo-->
    <link rel="icon" href="/static/images/logo.ico" type="image/x-icon">
    <!-- 收藏夹logo-->
    <link rel="shortcut icon" href="/static/images/logo.ico" type="image/x-icon">
    <!--Bootstrap-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--blog自适应样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/responsive.css">

    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/iconfont.css' %}">
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>菜根谭</title>
</head>

<body>
<!--Start Header-->
<header id="mu-header" class="" role="banner">
    <div class="container">
        <nav class="navbar navbar-default mu-navbar">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- Text Logo -->
                    <a class="navbar-brand" href="/">菜根譚</a>

                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav mu-menu navbar-right">
                        <li><a href="{% url 'blog:index' %}">首页</a></li>
                        <li><a href="{% url 'course:course_list' %}">教程</a></li>
                        {% for category in bigcategory_list %}
                            <li><a href="{% url 'article:bigcategory' category.slug %}">{{ category.name }}</a></li>
                        {% endfor %}

                        <li style="vertical-align: middle;margin-top:2px;">
                            <form role="search" method="get" id="searchform" action="{% url 'article:search' %}" style="opacity: 0.5;" >
                                <input type="search" name="q" placeholder="搜索" required style="border:1px solid #fff;background: transparent; width:50%;">
                                <button type="submit" style="border:0;"><span class="iconfont">&#xe614;</span></button>
                            </form>
                        </li>


                        <li>
                            {% if user.is_authenticated %}
                                <a href="{% url 'myaccount:profile' %}" title="{{ user.username }}">
                                    <span class="iconfont">&#xe653;</span>
                                </a>
                            {% endif %}

                            {% if not user.is_authenticated %}
                                {#                                <a href="{% url 'login_url' %}" title="登录">#}
                                <a href="/accounts/login/" title="登录">
                                    <span class="iconfont">&#xe653;</span>
                                </a>
                            {% endif %}
                        <li>

                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>


<banner class='banner'>
    <div id="mu-featured-slider">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="mu-featured-area">
                        <h1>菜根譚
                            <small>• 行者</small>
                        </h1>
                        <div class="mu-featured-content">
                            <p>大度看世界，从容走天下。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</banner>

<section class="container" id="section">
    <div class="section-content">

        <!--Start 左侧文章--->
        <div class="row">
            <div class=".col-md-12">
                <div class="arcicle-content">
                    {% for article in article_list %}
                        <div class="arcicle-list">
                            <header>
                                <a class="label label-info"
                                   href="/category/{{ article.category.bigcategory.slug }}/{{ article.category.slug }}/">{{ article.category.name }}</a>
                                <h4>
                                    <a href="{% url 'article:detail' article.pk %}" target="_blank"
                                       title="生活笔录 | 你真的适合零基础跨专业转行吗？">{{ article.title }} </a>
                                </h4>
                            </header>
                            <div class="focus">
                                <a href="{% url 'article:detail' article.pk %}" target="_blank">
                                    <img class="thumb img-rounded" src="{{ article.img_link }}">
                                </a>
                            </div>
                            <span class="note">
                                {{ article.excerpt }}
                            </span>
                            <p class="auth-span">
                                <span class=" muted">
                                    <span class="iconfont">&#xe600;</span>
                                    <a href="#">{{ article.author }}</a>
                                </span>
                                <span class=" muted">
                                    <span class="iconfont">&#xe61a;</span>
                                    <span>{{ article.created_time | date:"Y-m-j" }}</span>
                                </span>
                                <span class=" muted">
                                    <span class="iconfont">&#xe639;</span>
                                    <span>{{ article.counter }}&#32;阅读</span>
                                </span>
                                <span class=" muted">
                                    <span class="iconfont">&#xe648;</span>

                                    <span>{% get_comment_count article.id as commentscount %}{{ commentscount }}&#32;评论</span>
                                </span>

                            </p>
                        </div>
                    {% endfor %}
                </div>
            </div>


        </div>
        <!--End 左侧文章--->


        <!--Start 右侧内容--->
        <aside class="sider">
            <div class="about-me">
                {% aboutme %}
            </div>
            <div class="friendly-link">
                {% article_category %}

            </div>
            <div class="tag-content" id="tag">

                <div class="search-tag">
                    {% show_tags %}
                </div>
            </div>
            <div class="friendly-link">
                {% show_frendly %}
            </div>
        </aside>
        <!--End 右侧内容--->
    </div>


    <!--分页-->
    {% if is_paginated %}
        <div class="PageList" >
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">

                    <li class="{% if not page_obj.has_previous %} disabled {% endif %}">
                        <a href="{% if page_obj.has_previous %} ?page={{ page_obj.previous_page_number }} {% endif %}"
                           aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    {% if first %}
                        <li>
                            <a href="?page=1">1</a>
                        </li>
                    {% endif %}
                    {% if left %}
                        {% if left_has_more %}
                            <li>
                                <span>...</span>
                            </li>
                        {% endif %}
                        {% for i in left %}
                            <li>
                                <a href="?page={{ i }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                    {% endif %}
                    <li class="active"><a href="?page={{ page_obj.number }}">{{ page_obj.number }}</a></li>
                    {% if right %}
                        {% for i in right %}
                            <li>
                                <a href="?page={{ i }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        {% if right_has_more %}
                            <li>
                                <span>...</span>
                            </li>
                        {% endif %}
                    {% endif %}
                    {% if last %}
                        <li>
                            <a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
                        </li>
                    {% endif %}
                    <li class="{% if not page_obj.has_next %} disabled {% endif %}">
                        <a href="{% if page_obj.has_next %} ?page={{ page_obj.next_page_number }} {% endif %}"
                           aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    {% endif %}
</section>



<!--返回顶部--->
<div class="fixedTools hidden">
    <a id='backtop' class="fa fa-arrow-up"></a>
</div>

<!--footer-->
<footer class="footerbg">
    基于Django构建 © 2020
    |
    菜根譚&#8197;版权所有
    |
    <a href="http://www.miitbeian.gov.cn">渝ICP备19006782号-1</a>
    |
    <a href="/sitemap.xml" title="Sitemap" target="_blank">网站地图</a>
</footer>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    /*———————————————————————————————底部信息栏(需完善)——————————————————————————————————*/
    var viewH = $(window).height(); //浏览器高度
    var viewW = $(window).width(); //浏览器宽度
    var scroH = $(document).scrollTop(); //滚动高度
    var contentH = $(document).height(); //内容高度
    var _bh = $(document.body).height(); //内容body高度

    if (contentH > viewH) {//初始判断
        $('.footerbg').removeClass('fixed');
    } else if (contentH = viewH) {
        $('.footerbg').addClass('fixed');
    }
    if (viewW < 767) {//移动页面
        $('.footerbg').addClass('hidden');
    }
    jQuery(window).resize(function () {//实时
        var viewH = $(window).height(); //浏览器高度
        var contentH = $(document).height(); //内容高度
        if (contentH > viewH) {
            $('.footerbg').removeClass('fixed');
        } else if (contentH = viewH) {
            $('.footerbg').addClass('fixed');
        }

    });
    /*———————————————————————————————回到顶部——————————————————————————————————*/
    jQuery(window).bind('scroll', function () { /*给浏览器窗口绑定一个scroll事件*/
        if ($(window).scrollTop() > 200) {
            $('.fixedTools').removeClass('hidden');
        } else {
            $('.fixedTools').addClass('hidden');

        }
    });
    $('.fixedTools').on('click', function () {
        $('body,html').animate({scrollTop: 0}, 300);
    });
    /*———————————————————————————————导航栏固定——————————————————————————————————*/
    jQuery(window).bind('scroll', function () { /*给浏览器窗口绑定一个scroll事件*/
        if ($(window).scrollTop() > 200) {
            $('#mu-header').addClass('mu-fixed-nav');
        } else {
            $('#mu-header').removeClass('mu-fixed-nav');
        }
    });

    /*———————————————————————————————ajax左侧标签查询——————————————————————————————————*/
    function showHint(str) {
        var xmlhttp;
        // 1、创建 XMLHttpRequest 对象
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 3、当服务器响应就绪时执行函数
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                STKeywordDict = JSON.parse(xmlhttp.responseText);
                var html = '';
                for (var item in STKeywordDict) {
                    html = html + '<a class="tag-icon label label-default">#' + STKeywordDict[item] + '</a>'
                }
                $('.search-tag').html(html);
            }
        }
        //2、把请求发送到服务器上的文件
        xmlhttp.open("POST", "/ajax/tag/", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send('STKeyword=' + str);
    }
</script>
</body>

</html>